<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="box">hello world</div>
    <button class="btn">点我试试</button>

    <div class="box1">
        <div class="box2">
            <em>哈哈哈</em>
        </div>
    </div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</body>
<script src="../jquery.js"></script>
<script>

    // 创建元素 并插入
    // $(".box").append($("<p>"))
    // $("<p>").appendTo($(".box"))

    // $(".box").prepend($("<p>"))
    // $("<p>").prependTo($(".box"))

    // $(".box").after($("<p>"))
    // $(".box").before($("<p>"))


    // 删除元素
    // $(".box").remove()
    // $(".box").empty()
    // $(".box").replaceWith()

    
    // 替换元素
    // $(".box").replaceWith("<p>"+ $(".box").html() +"</p>")

    // 克隆元素
    // $(".btn").click(function(){
    //     $(".btn").clone(true).appendTo($("body"))
    // })

    
    // $(".btn").clone()
    // 等价于
    // $("<button>")

    // $(".btn").clone(true).appendTo($("body"))


    
    console.log($(".box1").children(".box2").children("em").parent().parent())

    console.log($(".box1").siblings("span").parent().children(".box1"))

    // 回到上一个选择器：适用于兄弟之间的互选
    console.log($(".box1").siblings("span").end())


</script>
</html>